<template>

    <a-form-item :label="label" :name="formkey" :label-col="labelCol">
        <div class="FormView">
            <a-dropdown :trigger="['click']" :destroyPopupOnHide="true">
                <a-input :name="formkey" v-model:value="ShowValue" spellcheck="false" readonly :disabled="disabled" />
                <template #overlay>
                    <a-menu class="MenuBox">
                        <div class="Left">
                            <a-button size="small" :type="ShowType('leftTop')" @click="Value = 'leftTop'">左上</a-button>
                            <a-button size="small" :type="ShowType('left')" @click="Value = 'left'">左</a-button>
                            <a-button size="small" :type="ShowType('leftBottom')"
                                @click="Value = 'leftBottom'">左下</a-button>
                        </div>
                        <div class="Center">
                            <div class="Top">
                                <a-button size="small" :type="ShowType('topLeft')"
                                    @click="Value = 'topLeft'">上左</a-button>
                                <a-button size="small" :type="ShowType('top')" @click="Value = 'top'">上</a-button>
                                <a-button size="small" :type="ShowType('topRight')"
                                    @click="Value = 'topRight'">上右</a-button>
                            </div>
                            <div class="Value">{{ ShowValue }}</div>
                            <div class="Bottom">
                                <a-button size="small" :type="ShowType('bottomLeft')"
                                    @click="Value = 'bottomLeft'">下左</a-button>
                                <a-button size="small" :type="ShowType('bottom')" @click="Value = 'bottom'">下</a-button>
                                <a-button size="small" :type="ShowType('bottomRight')"
                                    @click="Value = 'bottomRight'">下右</a-button>
                            </div>
                        </div>
                        <div class="Right">
                            <a-button size="small" :type="ShowType('rightTop')"
                                @click="Value = 'rightTop'">右上</a-button>
                            <a-button size="small" :type="ShowType('right')" @click="Value = 'right'">右</a-button>
                            <a-button size="small" :type="ShowType('rightBottom')"
                                @click="Value = 'rightBottom'">右下</a-button>
                        </div>
                    </a-menu>
                </template>
            </a-dropdown>
            <a-button :type="Code ? 'primary' : 'default'" class="button" v-if="codeStatus">
                <template #icon>
                    <span class="C-Icon">&#xe6d5;</span>
                </template>
            </a-button>
        </div>
    </a-form-item>
</template>
<script setup>
import { computed, ref } from 'vue';
const props = defineProps(['label', 'code', 'disabled', 'codeStatus', 'labelWidth', 'formkey']);
const Value = defineModel('value');

const ShowType = function (value) {
    return Value.value == value ? 'primary' : 'default'
}

const ValueMapping = ref({
    topLeft: '上左',
    top: '上',
    topRight: '上右',
    leftTop: '左上',
    left: '左',
    leftBottom: '左下',
    rightTop: '右上',
    right: '右',
    rightBottom: '右下',
    bottomLeft: '下左',
    bottom: '下',
    bottomRight: '下右',
});

const ShowValue = computed(() => {
    return ValueMapping.value[Value.value]
})



const labelCol = computed(() => {
    if (props.labelWidth) {
        return { style: { width: props.labelWidth } }
    } else {
        return null
    }
});


</script>
<style scoped lang="less">
.MenuBox {
    display: flex;
    align-items: stretch;

    .Left,
    .Right {
        padding: 32px 0;
        display: flex;
        flex-direction: column;
    }

    .Value {
        text-align: center;
    }

    .Center {
        // height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
</style>